<script setup>
import { ref } from 'vue'
import { UserFilled, Lock, Key } from '@element-plus/icons-vue'
const ruleFormRef = ref()

const ruleForm = ref({
  AccountNumber: '',
  password: '',
  RePassword: '',
})
const isLogin = ref(false)
const rules = ref({
  AccountNumber: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { min: 3, message: '长度要大于3位', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
    { min: 3, message: '长度要大于3位', trigger: 'change' }
  ],
  RePassword: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    {
      min: 3,
      message: '密码不一致',
      trigger: 'change',
    }
  ],

})
</script>
<template>
  <div class="login">
    <!-- 登录 -->
    <div class="login-form" style="position: absolute;">
      <!-- 登录界面 -->
      <el-form ref="ruleFormRef" style="max-width: 800px" :model="ruleForm" :rules="rules" class="demo-ruleForm"
        v-if="isLogin">
        <h2 style="margin-bottom: 20px;text-align: center;">欢迎登录后台系统</h2>
        <el-form-item prop="AccountNumber">
          <template></template>
          <el-input :prefix-icon="UserFilled" v-model="ruleForm.AccountNumber" type="text" autocomplete="off"
            placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" v-model="ruleForm.password" type="password" autocomplete="off"
            placeholder="请输入密码" />
        </el-form-item>
        <!-- <el-form-item>
          <el-radio-group v-model="a">
            <el-radio label="管理员" value="admin">管理员</el-radio>
            <el-radio label="用户" value="user">用户</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" style="width: 100%;margin-top: 20px;">登录
          </el-button>
        </el-form-item>
        <div style="display: flex;position: absolute;bottom: 30px">还没有账号？请<el-link style="color: blue;font-size: 16px;"
            @click="isLogin = !isLogin">&nbsp;注册</el-link>
        </div>
      </el-form>
      <!-- 注册页面 -->
      <el-form ref="ruleFormRef" style="max-width: 800px;" :model="ruleForm" :rules="rules" class="demo-ruleForm"
        v-else>
        <h2 style="margin-bottom: 20px;text-align: center;">欢迎注册后台系统</h2>
        <el-form-item prop="AccountNumber">
          <template></template>
          <el-input :prefix-icon="UserFilled" v-model="ruleForm.AccountNumber" type="text" autocomplete="off"
            placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" v-model="ruleForm.password" type="password" autocomplete="off"
            placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="RePassword">
          <el-input :prefix-icon="Key" v-model="ruleForm.RePassword" type="password" placeholder="请确定密码" />
        </el-form-item>
        <!-- <el-form-item>
          <el-radio-group v-model="a">
            <el-radio label="管理员" value="admin">管理员</el-radio>
            <el-radio label="用户" value="user">用户</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item>
          <el-button type="success" style="width: 100%;">注册
          </el-button>
        </el-form-item>
        <div style="display: flex;position: absolute;bottom: 30px">已经有账号？请<el-link style="color: blue;font-size: 16px;"
            @click="isLogin = !isLogin">&nbsp;登录</el-link>
        </div>
      </el-form>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background-image: url('@/assets/login.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .login-form {
    position: absolute;
    width: 400px;
    height: 400px;
    max-width: 500px;
    padding: 30px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    bottom: 30%;
    right: 190px;
    top: 30%;
  }

  .el-radio-group {
    margin-left: 10px;
  }
}
</style>
